window.addEventListener('load', function () {
    let tbody = document.querySelector('tbody')
    //遍历对象
    function init() {
        axios({
            method: 'get',
            url: '/score/list'
        }).then(res => {
            // console.log(res);
            let data = res.data.data
            let htmlStr = ''
            for (const key in data) {
                htmlStr += `<tr data-id=${key}>
                              <th scope="row">${key}</th>
                              <td>${data[key].name}</td>
                              <td class="score" data-batch='1'>${data[key].score[0]}</td>
                              <td class="score" data-batch='2'>${data[key].score[1]}</td>
                              <td class="score" data-batch='3'>${data[key].score[2]}</td>
                              <td class="score" data-batch='4'>${data[key].score[3]}</td>
                              <td class="score" data-batch='5'>${data[key].score[4]}</td>
                            </tr>`
            }
            tbody.innerHTML = htmlStr
        })
    }
    init()

    //实现成绩的录入和修改
    tbody.addEventListener('click', function (e) {
        if (e.target.className == 'score') {
            let td = e.target
            let score = td.innerText
            //判断是否有input框
            if (!td.querySelector('input')) {
                //清空td原始的成绩
                td.innerText = ''
                //创建input
                let input = document.createElement('input')
                //追加到td中
                td.appendChild(input)
                //给input赋值
                input.value = score
                //给输入框加样式
                input.style.border = 'none'
                input.style.background = 'transparent'
                input.style.outline = 'none'
                input.style.textAlign = 'center'
                //让输入框聚焦
                // input.focus()
                //输入框聚焦并全选中
                input.select()

                //为输入框添加失焦事件
                input.addEventListener('blur', function () {
                    td.innerText = score
                })
                // 实现录入和修改
                input.addEventListener('keyup', function (e) {
                    if (e.key == 'Enter') {
                        console.log(123);
                        //发起ajax请求
                        axios({
                            method: 'post',
                            url: '/score/entry',
                            data: {
                                //学员id
                                stu_id: td.parentNode.dataset.id,
                                // 组号
                                batch: td.dataset.batch,
                                //成绩
                                score: input.value
                            }
                        }).then(res => {
                            // console.log(res);
                            toastr.success(res.data.message)
                            td.innerHTML = ''
                            td.innerText = input.value
                        })
                    }
                })
            }
        }
    })
})